<template>
  <div>
    <el-dialog @close="close" title="添加学生信息" :visible.sync="showDialog">
<el-form  inline label-width="100px" :model="formData" :rules="formRules" ref="form">
    <el-form-item label="归属学科" prop="subject_name">
     <el-select clearable v-model="formData.subject_id" @change="subChange(formData.subject_id)" placeholder="归属学科">
              <el-option
                v-for="item in subjectLists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
    </el-form-item>
    <el-form-item label="归属班级" prop="class_name">
         <el-select clearable  v-model="formData.class_id" placeholder="请确保已选择学科">
              <el-option
                v-for="item in classNameList"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
    </el-form-item>
    <el-form-item label="学生姓名" prop="student_name">
        <el-input v-model="formData.student_name" placeholder="请输入学生姓名"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="student_phone">
        <el-input v-model="formData.student_phone" placeholder="请输入手机号码"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="student_password">
        <el-input type="password" v-model="formData.student_password" placeholder="默认密码是 姓名+admin88"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="student_sex">
        <el-radio-group v-model="formData.student_sex">
    <el-radio :label="1">男</el-radio>
    <el-radio :label="2">女</el-radio>
  </el-radio-group>
    </el-form-item>
    <el-form-item label="状态" prop="">
       <el-radio-group v-model="formData.student_state">
    <el-radio :label="0">禁用</el-radio>
    <el-radio :label="1">待审核</el-radio>
    <el-radio :label="2">正常</el-radio>
  </el-radio-group>
         </el-form-item>
</el-form>
<el-row type="flex" justify="center" >
    <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
</el-row>
    </el-dialog>
  </div>
</template>

<script>
import {getClassListApi,addStudentApi,editStudentApi} from '@/api/student'
export default {
name:'addStudent',
props:{
subjectLists:{
type:Array,
required:"true"
}
},
data () {
    return {
        showDialog:false,
        formData:{
        subject_id:'',
        class_id:'',
        student_name:'',
        student_phone:'',
        student_password:'',
        student_sex:1,
        student_state:2
        
        },
        formRules:{
        subject_id:[{required:true,message:"请输入",trigger:'blur'}],
        class_id:[{required:true,message:"请输入",trigger:'blur'}],
        student_name:[{required:true,message:"请输入",trigger:'blur'}],
        student_phone:[{required:true,message:"请输入",trigger:'blur'}]
        
        },
        classNameList:[]
       
    }
},
created () {
 
 this.subChange(this.formData.subject_id)
 
},
methods: {
    // 根据subject_id获取班级信息
   async subChange(val){
    // console.log("ok");
    this.formData.class_id=''
    console.log(1111);
    let classList= await getClassListApi({
        page: 1,
        limit: 10,
        subject_id:val
    })
    console.log(classList);
    this.classNameList=classList.list
    },

    // 发送请求
   async  btnOk(){
  // 表单验证
  try{
    await this.$refs.form.validate();
  }catch(error){
  console.log(error);
  }
  // 判断是否含有id
  if(this.formData.id){
  await editStudentApi(this.formData)
  }else{
  await addStudentApi(this.formData)
  }
  this.$message.success("操作成功")
  this.showDialog=false
  // 数据更新
  this.$emit('updateList')
   
   },
   close(){
   this.formData={
     subject_id:'',
        class_id:'',
        student_name:'',
        student_phone:'',
        student_password:'',
        student_sex:1,
        student_state:2
        
   }
   this. classNameList=[]
   }
}
}
</script>

<style>

</style>